<template>
  <!-- 手动回传 -->

  <el-dialog title="退款" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
      <el-form-item label="退款金额" prop="refund_money" required>
        <el-input v-model="form.refund_money" type="number" placeholder="请输入退款金额" />
      </el-form-item>
      <el-form-item label="退款原因" prop="reason">
        <el-input v-model="form.reason" type="textarea" placeholder="请输入退款原因" />
      </el-form-item>
      <el-form-item label="是否清除账户金币" prop="clear_coin">
        <el-radio-group v-model="form.clear_coin">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否清除会员权益" prop="cancel_vip">
        <el-radio-group v-model="form.cancel_vip">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否封禁账号" prop="ban_user">
        <el-radio-group v-model="form.ban_user">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">提 交</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { orderRefund } from '@/api/order/orderData'
import { deleteUser } from '@/api/system/account'

export default {
  name: 'RefundPopup',
  props: {
    order_id: {
      type: [Number, String],
      required: true
    },
    // 订单类型 1-金币 2-会员
    order_type: {
      type: Number,
      required: true
    },
    payMoney: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {

      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        refund_money: undefined,
        reason: undefined,
        clear_coin: 1,
        cancel_vip: 1,
        ban_user: 1
      },
      // 表单校验
      rules: {
        refund_money: [
          {
            validator: (rule, value, callback) => {
              if (!value || Number(value) === 0) return callback(new Error('请输入退款金额'))
              else if (Number(value) > Number(this.$props.payMoney)) callback(new Error('退款金额不可大于支付金额'))
              else callback()
            },
            trigger: ['blur', 'change']
          }
        ],
        reason: [
          { required: true, message: '请输入退款原因', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  watch: {
    payMoney: {
      handler(val) {
        this.form.refund_money = val
      }
    }
  },
  methods: {
    handleOpen() {
      this.open = true
      this.reset()
    },
    // 取消按钮
    handleCancel() {
      this.open = false
    },
    // 表单重置
    reset() {
      this.form = {
        refund_money: this.$props.payMoney,
        reason: undefined,
        clear_coin: 1,
        cancel_vip: 1,
        ban_user: 1
      }
      this.resetForm('formRef')
    },
    /** 提交按钮 */
    submitForm: function() {
      const _this = this
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$modal
            .confirm('确认要执行退款吗？')
            .then(function() {
              _this.submitRequest()
            })
        }
      })
    },
    submitRequest() {
      const { order_id, order_type } = this.$props
      orderRefund({
        order_id,
        order_type,
        ...this.form
      }).then(res => {
        this.$modal.msgSuccess('退款成功')
        this.open = false
        this.$emit('refresh')
      })
    }
  }
}
</script>

<style scoped>

</style>
